<template>
  <div class="movie-from" style="margin-top:-0px;margin-left:-0px">
    <!-- 头部 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix tac">
        <span
          v-text="`${isAdd?'添加':'编辑'}影院`"
          style="font-size: 18px;
    color: #909399;font-weight: 700; "
        ></span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <div style="display:flex;">
          <el-form-item label="电影名称">
            <el-input style="width:280px;" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="电影分类">
            <el-input style="width:280px;" v-model="form.category"></el-input>
          </el-form-item>
          <el-form-item label="电影类型">
            <el-input style="width:280px;" v-model="form.category"></el-input>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="导演">
            <el-input style="width:280px;" v-model="form.director"></el-input>
          </el-form-item>
          <el-form-item label="语言">
            <el-input style="width:280px;" v-model="form.language"></el-input>
          </el-form-item>
          <el-form-item label="产地">
            <el-input style="width:280px;" v-model="form.nation"></el-input>
          </el-form-item>
        </div>
        <div style="display:flex;position: relative;">
          <el-form-item label="评分">
            <el-input style="width:280px;" v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="时长">
            <el-input style="width:280px;" v-model="form.runtime"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="form.synopsis"
              style="width:280px;   position: absolute;"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="上映时间">
            <div class="block">
              <!-- <span class="demonstration">设置默认时间</span> -->
              <el-date-picker
                v-model="form.premiereAt"
                type="date"
                placeholder="选择日期"
                style="width:280px;"
                align="right"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </div>
            <!-- <el-input style="width:280px;" v-model="form.premiereAt"></el-input> -->
          </el-form-item>
          <el-form-item label="预售">
            <el-switch
              v-model="form.isPresale"
              @change="changedata"
              :active-text="`${form.isPresale?'是':'否'}`"
            ></el-switch>
          </el-form-item>
          <el-form-item label="在售">
            <el-switch
              v-model="form.isSale"
              @change="changedata1"
              :active-text="`${form.isSale?'是':'否'}`"
            ></el-switch>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="海报">
            <el-upload
              action="http://132.232.87.95:3000/admin/film/upload"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              :file-list="fileList"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="剧照">
            <el-upload
              action="http://132.232.87.95:3000/admin/film/upload"
              list-type="picture-card"
              :on-success="handleAvatarSuccess2"
              :file-list="fileList2"
              :on-remove="handleRemove2"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 上传海报 -->

        <!-- <el-form-item label="演员表">
          <el-input v-model="form.actors.name"></el-input>
        </el-form-item>-->
        <el-form-item class="tac">
          <el-button
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            type="primary"
            @click="onSubmit"
            v-text="`立即${isAdd?'添加':'编辑'}`"
            style="margin-left:-80px;"
          ></el-button>
          <el-button
            @click="del"
            type="info"
            v-text="`${isAdd?'清空数据':'取消修改'}`"
            style="margin-left:40px;"
          ></el-button>
          <el-button type="success" style="margin-left:40px;" @click="watch1">查看列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isAdd: true,
      loading: false,
      flag:true,
      arr: [],
      form: {
        category: "科幻",
        director: "郭帆",
        premiereAt: "",
        name: "流浪地球", // 必须
        photos: [],
        actors: [
          {
            name: "郭帆",
            role: " 导演",
            avatarAddress: "头像图片地址"
          },
          {
            name: "屈楚萧",
            role: "刘启  ",
            avatarAddress: "头像图片地址"
          }
        ],
        poster: "",
        grade: "8",
        language: "汉语普通话   英语",
        runtime: "100",
        filmType: "2D",
        isPresale: true,
        timeType: "3",
        isSale: false,
        synopsis: "介绍",
        nation: "中国大陆 "
      },
      fileList: [],
      fileList2: [],
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  // destroyed(){
  //   this.$router.push('/film/list')
  // },
  created() {
    if (this.$route.fullPath !== "/film/add") {
      this.isAdd = false;
      this.form = this.$route.query.data;
      if (this.form.poster) {
        this.fileList.push({
          name: this.form.name,
          url: this.form.poster
        });
      }

      if (this.form.photos) {
        for (let i = 0; i < this.form.photos.length; i++) {
          this.fileList2.push({
            name: this.form.name,
            url: this.form.photos[i]
          });
        }
      }
    }
  },

  methods: {
    changedata() {
      // console.log(111111);
      this.flag=!this.flag
      this.form.isPresale = this.flag;
      this.form.isSale = !this.flag;
    },
    changedata1() {
      // console.log(22222);
      this.flag=!this.flag
      this.form.isPresale = !this.flag;
      this.form.isSale = this.flag;
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      this.form.poster = "";
    },
    handleRemove2(file, fileList) {
      let arrlist = this.form.photos;

      for (let i = 0; i < arrlist.length; i++) {
        if (arrlist[i].url || arrlist[i] == file.url.url || file.url) {
          arrlist.splice(i, 1);
        }
      }
    },
    //   图片上传的事件
    handleAvatarSuccess(res, file) {
      this.form.poster = res.image.url;
    },
    handleAvatarSuccess2(res, file) {
      this.arr.push(res.image.url);
      this.form.photos = this.arr;
    },
    onSubmit() {
      this.loading = true;
      if (this.isAdd) {
        let url = "/film/add";
        let data = {
          category: this.form.category,
          director: this.form.director,
          premiereAt: this.form.premiereAt,
          name: this.form.name, // 必须
          photos: this.form.photos,
          actors: [
            {
              name: "郭帆",
              role: " 导演",
              avatarAddress: "头像图片地址"
            },
            {
              name: "屈楚萧",
              role: "刘启  ",
              avatarAddress: "头像图片地址"
            }
          ],
          poster: this.form.poster,
          grade: this.form.grade,
          language: this.form.language,
          runtime: this.form.runtime,
          filmType: this.form.filmType,
          isPresale: this.form.isPresale,
          timeType: this.form.timeType,
          isSale: this.form.timeType.isSale,
          synopsis: this.form.synopsis,
          nation: this.form.nation
        };
        if (this.form.poster) {
          this.$axios
            .post(url, data)
            .then(res => {
              this.loading = false;
              this.$message({ message: "添加成功", type: "preview" });
            })
            .catch(err => {
              this.loading = false;
              this.$message("添加失败");
            });
        } else {
          this.$message({
            message: "请上传海报图片",
            type: "warning"
          });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        }
      } else {
        let url = "/film/edit";
        let data = {
          category: this.form.category,
          director: this.form.director,
          premiereAt: this.form.premiereAt,
          name: this.form.name, // 必须
          photos: this.form.photos,
          actors: [
            {
              name: "郭帆",
              role: " 导演",
              avatarAddress: "头像图片地址"
            },
            {
              name: "屈楚萧",
              role: "刘启  ",
              avatarAddress: "头像图片地址"
            }
          ],
          poster: this.form.poster,
          grade: this.form.grade,
          language: this.form.language,
          runtime: this.form.runtime,
          filmType: this.form.filmType,
          isPresale: this.form.isPresale,
          timeType: this.form.timeType,
          isSale: this.form.isSale,
          synopsis: this.form.synopsis,
          nation: this.form.nation,
          filmId: this.form.filmId
        };
        if (this.form.poster) {
          this.$axios
            .post(url, data)
            .then(res => {
              this.loading = false;
              let msgObj = this.$message({
                message: "修改成功",
                type: "preview"
              });
              setTimeout(() => {
                msgObj.close();
                this.$router.push("/film/list");
              }, 500);
            })
            .catch(err => {
              this.loading = false;
              this.$message("修改失败");
            });
        } else {
          this.$message({
            message: "请上传海报图片",
            type: "warning"
          });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        }
      }
    },
    del() {
      if (this.isAdd) {
        this.form = {};
      } else {
        this.$router.push("/film/list");
      }
    },
    watch1() {
      this.$router.push("/film/list");
    }
  }
};
</script>

<style lang='less' scoped>
.movie-from {
  width: 100%;
  margin: 15px;
}
</style>